<template>
  <div>
    <div>
      <div class="header">
        <div class="header1">
          <el-input show-word-limit maxlength="100" style="width: 70%; margin-right: 1em; font-size: 1.8em;" v-model="title"></el-input>
          <el-button @click="saveModel = true">保存草稿</el-button>
          <el-button>发布文章</el-button>
        </div>
        <div class="header2">

        </div>
      </div>
      <div class="container-lg">
        <div contenteditable placeholder='请输入内容' class="scroll input left-lg" @input="input"># 测试用例</div>
		<markdown-it-vue class="scroll right-lg" :content="textarea"/>
      </div>
	  <el-dialog title="保存" v-bind:visible="saveModel">
		  <div>asdsad</div>
		  <el-button @click="save()"></el-button>
		  <el-button @click="saveModel = false">取 消</el-button>
	  </el-dialog>
    </div>
  </div>
</template>
<script>
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
export default {
  components: {
    MarkdownItVue,
  },
  data() {
    return {
      textarea: "# 测试用例",
      title: '',
	  saveModel: false
    };
  },
  methods: {
    input(event) {
      let content = event.target.innerText
      console.log(content)
      this.textarea = content
    },
	async save() {
		let date = new Date().Format('yyyy-MM-ddTHH:mm:ss')
		let request = {
			title: this.title,
			content: this.textarea,
			type: "-1",
			createTime: date,
			updateTime: date
		}
		let res = await this.$http.post('/article/save', request)
		alert(res)
		if (res.statusCode == 200) {
			this.tips('保存成功')
			
		}
		this.saveModel = false
	},
	tips(msg) {
	  const h = this.$createElement;
	  this.$notify({
	    title: "结果",
	    message: h("i", { style: "color: teal" }, msg),
	  });
  }
  }
};
</script>
<style scoped>
.container-lg {
  display: flex;
  justify-content: space-between;
  background-color: white;
  flex-direction: row;
  width: 100vw;
  height: calc(100vh - 5em);
}
.header1 {
  display: flex;
  justify-content: flex-start;
}

.header {
  width: 100%;
  height: 5em;
  padding: .5em;
}

.input {
  background-color: rgb(245, 245, 245);
  
}

.scroll {
	overflow: scroll;
	border-radius: 0px;
	outline: none;
}

.left-lg {
  width: 49%;
}
.right-lg {
  width: 49%;
}
</style>